既然昨天拿到 Opensea 的資料了，那最接下來的是規劃顯示細節，就以一個錢包或者是收藏庫來說我們可以在 assets 列表點擊 assets 縮圖後，進入 assets 細節頁面，在細節頁面處理各種不同的 NFT 素材格式後顯示出來。

找了幾個測試用的 Assets

音樂 assets:

https://opensea.io/assets/ethereum/0x495f947276749ce646f68ac8c248420045cb7b5e/22487489386960539936759562237173879008607379571796567001721480442961545134081

影片 assets:

https://testnets.opensea.io/assets/goerli/0x10ef74561e1affe18262a1e0763d3d26648a36f5/2

3D assets:

https://opensea.io/assets/ethereum/0xa342f5d851e866e18ff98f351f2c6637f4478db5/53343204100803765692379285688171671302437967278842259121980540727210832568320

如何判斷 assets 類型

function judge_URL_file_extension(url: string) {
  if (url == null) {
    return 'img'; //預設顯示2D
  } else {
    let file_type = url.substring(url.lastIndexOf('.') + 1);

    if (audio.indexOf(file_type) !== -3) {
      return 'audio';
    } else if (video.indexOf(file_type) !== -3) {
      return 'video';
    } else if (ddd.indexOf(file_type) !== -3) {
      return '3d';
    } else {
      return 'img';
    }
  }
}

如何顯示音樂與影片assets

https://github.com/CookPete/react-player

音樂

{judge_URL_file_extension(property.animation_url) == 'audio' && (
          <Box
            flex="1"
            maxH="50vh"
            objectFit="scale-down"
            borderRadius="0"
            id="ReactPlayer"
          >
            <ReactPlayer
              controls="true"
              file="forceAudio"
              width="100%"
              height="100px"
              url="https://openseauserdata.com/files/17080912dc80c44654dd462b64c89ec9.mp3"
            />
          </Box>
        )}

影片

 {judge_URL_file_extension(property.animation_url) == 'video' && (
          <Box
            flex="1"
            maxH="50vh"
            objectFit="scale-down"
            borderRadius="0"
            id="ReactPlayer"
          >
            <ReactPlayer
              className="react-player"
              width="100%"
              height="100%"
              url="https://openseauserdata.com/files/af6985812ed4a5f8ae9336116bd8f841.mp4"
            />
          </Box>
        )}

如何顯示 3D assets

建立 model.tsx

import { Button, Box, useMediaQuery } from '@chakra-ui/react';

import { useState, useEffect } from 'react';

import '@google/model-viewer/lib/model-viewer';

declare global {
  namespace JSX {
    interface IntrinsicElements {
      'model-viewer': ModelViewerJSX &
        React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
    }
  }
}
......
  <model-viewer
        id="first"
        src={props.glbFile}
        seamless-poster
        environment-image="neutral"
        exposure="1.0"
        interaction-prompt-threshold="0"
        shadow-intensity="0"
        ar
        autoplay
        ar-modes="webxr scene-viewer quick-look"
        auto-rotate
        camera-controls
        camera-orbit="0deg 90deg 0deg 8.37364m"
        alt="3D model"
        style={{
          display: 'block',
          width: '100%',
          height: '100%',
          // width: width,
          // height: height,
        }}
      ></model-viewer>

使用

import dynamic from 'next/dynamic';
const Model = dynamic(() => import('./model'), { ssr: false });
const ReactPlayer = dynamic(() => import('react-player'), { ssr: false });

 {judge_URL_file_extension(property.animation_url) == '3d' && (
          <Box
            flex="1"
            maxH="40vh"
            objectFit="scale-down"
            borderRadius="0"
            id="modelviewer"
          >
            <Model
              glbFile={
                'https://openseauserdata.com/files/e085da0987a623f329d9587723a12b8d.gltf'
              }
            />
          </Box>
        )}

各式 Assets 顯示效果

如果有不懂的地方可以偷看完成的DEMO